<template>
	<div class="best-wrap">
		<module-title title="其他信息">
			<el-button type="primary" @click="onSubmit">保存</el-button>
		</module-title>
		<el-form
			class="the-form"
			label-width="100px"
			label-suffix="："
			ref="form"
		>
			<el-form-item :label="label.label" v-for="label in labelDataList" :key="label.key">
				<el-select
					:placeholder="'请选择'+label.label"
					class="w-max"
					clearable
					:multiple="label.isMultiple"
					v-model="formData[label.key]"
				>
					<el-option
						v-for="item in label.options"
						:key="item.labelDetailId"
						:label="item.labelDetailName"
						:value="item.labelDetailId"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="适用地区" prop="areaList">
				<cascader-area
					style="width: 100%;"
					ref="cascaderAreaRef"
					v-model="formData.areaList"
					has-all-area
					:props-options="{ multiple: true}"
					:params="{
						areaCode: '',
						rank: 2,
						needArea: 'N'
					}"
				/>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import ModuleTitle from "./module-title.vue";
	import CascaderArea from "@rc/pages/components/async/cascader-area.vue";
	export default {
		props: {
			// 回显初始化需要的数据
			defaultData: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			ModuleTitle,
			CascaderArea
		},
		data() {
			return {
				labelDataList: [], // 标签列表
				areaOptions: [], // 地区
				formData: {
					areaList: []
				}
			};
		},
		watch: {
			defaultData: {
				handler(val) {
					this.getInit(val);
					this.getLabelDataInit();
				},
				immediate: true
			}
		},
		methods: {
			/**
			 * 初始化表单项
			 */
			getInit(resourceInfo) {
				let labelDataList = [];
				const labelList = resourceInfo.rcResourceLabelInfoResponseVoList;
				labelDataList = labelList.filter((item) => item.name === "星级" || item.name === "资源用途");
				labelDataList = labelDataList.map((label) => {
					const isMultiple = label.name === "资源用途";
					let labelId = null;
					//表单回显
					if (isMultiple) {
						labelId = label.labelDetails ? label.labelDetails.map((label) => label.id) : [];
					} else {
						labelId = label.labelDetails && label.labelDetails.length ? label.labelDetails[0].id : "";
					}

					this.$set(this.formData, "label" + label.id, labelId);
					// 资源用途是多选
					return {
						id: label.id,
						key: "label" + label.id,
						label: label.name,
						options: [],
						isMultiple
					};
				});
				this.labelDataList = labelDataList;
				const areaList = resourceInfo.rcResourceAreaResponseVos || [];
				this.formData.areaList = areaList.map((item) => item.cityId);
			},
			/**
			 * 获取所有的label标签
			 */
			getLabelDataInit() {
				Http.callServices([
					{
						url: "rc/admin/labels" // 获取标签列表
					}
				]).success((labelsData) => {
					let labelDataList = this.labelDataList;
					//判断是否有资源用途标签
					if (labelsData) {
						labelDataList.forEach((label) => {
							let data = labelsData.find((item) => "label" + item.labelId === label.key);
							label.options = data.labelDetailInfosResponseVoList || [];
						});
					}
					this.labelDataList = labelDataList;
				});
			},
			/**
			 * 点击保存按钮
			 */
			onSubmit() {
				const checkedArea = this.$refs.cascaderAreaRef.api_getCheckedNodes();
				//拼接地区入参
				let areaList = [];
				checkedArea.forEach((area) => {
					if (!area.children || area.children.length === 0) {
						let areaObj = {};
						areaObj.cityId = area.data.areaCode;
						areaObj.cityName = area.data.areaName;
						const parent = area.parent;
						areaObj.provinceId = parent ? parent.data.areaCode : "";
						areaList.push(areaObj);
					}
				});
				const labels = this.labelDataList.map((item) => {
					let labelDetailIds = this.formData["label" + item.id] ? this.formData["label" + item.id] : [];
					labelDetailIds = Array.isArray(labelDetailIds) ? labelDetailIds : [labelDetailIds];

					// 拼接labelName入参
					let labelDetailNames = [];
					labelDetailIds.forEach((labelId) => {
						let label = item.options.find((label) => label.labelDetailId === labelId);
						labelDetailNames.push(label.labelDetailName);
					});
					return {
						labelId: item.id,
						labelName: item.label,
						labelDetailIds,
						labelDetailNames
					};
				});
				const params = {
					areaList,
					labels,
					resourceId: this.defaultData.resourceId
				};
				this.$emit("submit", params);
			}
		}
	};
</script>

<style lang="less" scoped>
	.w-max {
		width: 100%;
	}
	.best-wrap {
		padding: 0 20px;
		background: #fff;
		border-radius: 2px;
	}

	.the-form {
		border-top: 1px dashed #f0f0f0;
		padding-top: 16px;
        padding-bottom: 1px;
		/deep/ .el-form-item {
			margin-bottom: 16px;
		}
	}

	.name-item {
		display: flex;

		.section {
			margin-bottom: 0;
			width: 65px;
			margin: 0 6px;
		}
		.name {
			margin-bottom: 0;
			flex-grow: 1;
			margin-left: 14px;
		}
	}
	/deep/ .el-tag {
		height: 23px;
		line-height: 23px;
	}
</style>
